<template>
  <picker
    class="picker"
    mode="multiSelector"
    :range="region"
    range-key="label"
    :value="regionIndex"
    @change="pickerChange"
    @columnchange="pickerColumnchange"
  >
    <view :class="[regionStr ? 'uni-input-input' : 'select-wrap']">
      {{ regionStr ? regionStr : "请选择所在地址" }}
    </view>
    <!-- <view class="uni-form-item"> -->
    <!-- <input
        type="text"
        class="input select"
        v-model="regionStr"
        name="region"
        :disabled="true"
        placeholder-style="color: #A7A7A7;"
        placeholder="请选择地址"
      /> -->

    <!-- <text class="iconfont icon-xiangxia"></text> -->
    <!-- </view> -->
  </picker>
</template>
<script>
import { regionData } from "element-china-area-data";

export default {
  data() {
    return {
      region: "",
      genderStr: "",
      regionData: regionData.filter(item => item.value == '33'),
      region: [[], [], []],
      regionIndex: [0, 0, 0],
      regionStr: "",
      address: "",
    };
  },
  created() {
    console.log(999, this.regionData)

    this.region[0] = this.regionData;
    this.region[1] = this.regionData[0].children;
    this.region[2] = this.regionData[0].children[0].children;
  },
  methods: {
    pickerChange(e) {
      // console.log(e, '1');
      this.regionIndex = e.detail.value;
      this.regionStr =
        this.region[0][this.regionIndex[0]].label +
        " " +
        this.region[1][this.regionIndex[1]].label +
        " " +
        this.region[2][this.regionIndex[2]].label;
      this.address =
        this.region[0][this.regionIndex[0]].label +
        this.region[1][this.regionIndex[1]].label +
        this.region[2][this.regionIndex[2]].label +
        "";
      console.log(
        "编号",
        this.region[0][this.regionIndex[0]].value,
        this.region[1][this.regionIndex[1]].value,
        this.region[2][this.regionIndex[2]].value
      );
      this.$emit("input", [
        this.region[0][this.regionIndex[0]].value,
        this.region[1][this.regionIndex[1]].value,
        this.region[2][this.regionIndex[2]].value,
      ],[
        this.region[0][this.regionIndex[0]].label,
        this.region[1][this.regionIndex[1]].label,
        this.region[2][this.regionIndex[2]].label
      ]);
    },
    pickerColumnchange(e) {
      if (e.detail.column === 0) {
        // 声明城市数组
        let cityArr = [];
        let countyArr = [];
        // 设置下标
        this.regionIndex = [e.detail.value, 0, 0];
        this.$set(this.region, 1, this.regionData[e.detail.value].children);
        this.$set(
          this.region,
          2,
          this.regionData[e.detail.value].children[0].children
        );
      }
      if (e.detail.column === 1) {
        this.regionIndex[1] = e.detail.value;
        this.regionIndex[2] = 0;
        this.$set(
          this.region,
          2,
          this.regionData[this.regionIndex[0]].children[this.regionIndex[1]]
            .children
        );
      }
      if (e.detail.column === 2) {
        this.regionIndex[2] = e.detail.value;
      }
    },
  },
};
</script>
